<template>
   <div>
    <div class="rditop f-cb">
      <!-- 模块一 推荐节目-->
      <div class="blk f-fl">
        <div class="u-title f-cb">
          <h3>
            <a href="javascript:;" class="f-ff2">推荐节目</a>
          </h3>
          <a href="javascript:;" class="more s-fc3">更多 ></a>
        </div>
        <ul class="m-plylist toplist">
          <li
            :class="['itm', { bg: index % 2 == 0 }]"
            v-for="(item, index) in recommend_dj"
            :key="index"
          >
            <a href="javascript:;" class="cvr u-cover u-cover-tiny f-fl">
              <img :src="item.coverUrl" alt="" />
              <i class="ply f-pa f-dn f-alpha" @click="send_dj(item.id , $event)"></i>
            </a>
            <div class="cnt f-fl">
              <h3 class="f-thide">
                <router-link :to="{path:'/home/program' , query:{id:item.id}}" class="s-fc1 f-fw0">{{ item.name }}</router-link>
              </h3>
              <p class="f-thide">
                <router-link :to="{path:'/home/djradio' , query:{id:item.radio.id}}" class="s-fc4" title="时光唱片店">{{
                  item.dj.brand
                }}</router-link>
              </p>
            </div>
            <a href="javascipt:;" class="tag u-type">{{
              item.radio.category
            }}</a>
          </li>
        </ul>
      </div>
      <!-- 模块二 节目排行榜-->
      <div class="blk f-fr">
        <div class="u-title f-cb">
          <h3>
            <a href="javascript:;" class="f-ff2">节目排行榜</a>
          </h3>
          <a href="javascript:;" class="more s-fc3">更多 ></a>
        </div>
        <ul class="m-plylist toplist">
          <li
            :class="['itm', { bg: index % 2 == 0 }]"
            v-for="(item, index) in toplist"
            :key="index"
          >
            <a href="javascript:;" class="cvr u-cover u-cover-tiny f-fl">
              <img :src="item.program.coverUrl" alt="" />
              <i class="ply f-pa f-dn f-alpha" @click="send_dj(item.program.id , $event)"></i>
            </a>
            <div class="cnt f-fl">
              <h3 class="f-thide">
                <router-link :to="{path:'/home/program' , query:{id:item.program.id}}" class="s-fc1 f-fw0">{{
                  item.program.name
                }}</router-link>
              </h3>
              <p class="f-thide">
                <router-link :to="{path:'/home/djradio' , query:{id:item.program.radio.id}}" title="时光唱片店">{{
                  item.program.radio.name
                }}</router-link>
              </p>
            </div>
            <span class="hot u-hot f-fl">
              <i :style="{ width: item.score /367073 *100 + '%' }">
                <i></i>
              </i>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 模块三 下面所有内容 -->
    <div class="rdimore" v-for="(item , index) in dj_modelData" :key="index">
        <div class="u-title f-cb">
            <h3>
                <span class="f-ff2">
                  <a href="javascript:;">{{item.dj_name}}</a>
                  <span class="f-ff1">·</span>
                  电台
                </span>
            </h3>
            <a href="JavaScript:;" class="more s-fc3">更多 &gt;</a>
        </div>
        <ul class="rdilist f-cb">
            <li v-for="(item , li_index) in  dj_modelData[index].data" :key="li_index">
              <router-link :to="{path:'/home/djradio' , query:{id:item.id}}" class="cvr u-cover u-cover-rdi f-fl">
                  <img :src="item.picUrl">
              </router-link>
              <div class="cnt">
                  <h3 class="f-fs3">
                      <router-link :to="{path:'/home/djradio' , query:{id:item.id}}"  class="s-fc1">{{item.name}}</router-link>
                  </h3>
                  <p class="note s-fc4">{{item.rcmdtext}}</p>
              </div>
            </li>
        </ul>
    </div>
   </div>
</template>

<script>
import { recommend_dj } from "../../../network/dj";
import { toplist_dj } from "../../../network/dj";
import { dj_type } from "../../../network/dj";
export default {
  data() {
    return {
      recommend_dj: [],
      toplist: [],
      dj_modelData:[
          {dj_name:'音乐故事' ,id:2 , data:[]},
          {dj_name:'助眠解压', id:6 , data:[]},
          {dj_name:'侃侃而谈', id:5 , data:[]},
          {dj_name:'情感调频',id:3 , data:[]},
          {dj_name:'创作翻唱',id:2001 , data:[]},
          {dj_name:'其他',id:11 , data:[]}
      ]
    };
  },
  methods: {
    res_recommend() {
      //获取推荐节目
      recommend_dj().then((res) => {
        this.recommend_dj = res.data.programs;
      });
    },
    res_toplist(limit, offset) {
      //获取节目排行
      toplist_dj(limit, offset).then((res) => {
        this.toplist = res.data.toplist;
      });
    },
    res_djtype() {
      //获取 分类推荐【/音乐故事 /助眠解压....】
        this.dj_modelData.forEach( item => {
            dj_type(item.id).then((res) => {
                 item.data = res.data.djRadios.slice(0 , 4)
          });
      });
    },
    send_dj(id , e){
      this.$store.dispatch("dj_ct",{dj_id:id , pageY:e.pageY})
    }
  },
  created() {
    this.res_djtype();
    this.res_recommend();
    this.res_toplist(10,0);
  },
};
</script>

<style >
.m-radio .rditop,
.m-radio .new {
  margin-top: 10px;
}
.m-radio .rditop .blk {
  width: 426px;
}
.f-fl {
  float: left;
}
.u-title {
  height: 40px;
  border-bottom: 2px solid #c20c0c;
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
.u-title h3 {
  float: left;
  font-size: 24px;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
}
.f-ff2 {
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.u-title .more {
  float: right;
  margin-top: 14px;
  color: #666;
}
a.s-fc3:hover {
  text-decoration: underline;
}

.m-radio .toplist {
  height: 600px;
  border: 1px solid #e2e2e2;
  border-top: none;
}

.m-radio .toplist .itm {
  width: 424px;
  height: 40px;
  padding: 10px 0;
  line-height: 40px;
}
.m-plylist .itm {
  float: left;
  background: #fff;
}
.f-cb:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
}

.m-plylist .bg {
  background: #f7f7f7;
}

.m-radio .toplist .cvr {
  margin-left: 20px;
}
.u-cover-tiny {
  width: 40px;
  height: 40px;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
p {
  padding: 0;
  margin: 0;
}
.u-cover {
  position: relative;
  display: block;
}
a.u-cover:hover :nth-child(2) {
  opacity: 1;
}
.u-cover-tiny .ply {
  position: absolute;
  display: block;
  opacity: 0;
  width: 22px;
  height: 22px;
  top: 50%;
  left: 50%;
  overflow: hidden;
  margin: -11px 0 0 -11px;
  background: url("../../../assets/imgs/iconall.png") no-repeat;
  background-position: 0 -85px;
}
.u-cover img {
  display: block;
  width: 100%;
  height: 100%;
}
.m-radio .toplist .cnt {
  width: 254px;
  margin: 1px 0 0 10px;
  line-height: 20px;
}
.f-thide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 12px;
}
.s-fc1 {
  color: #333;
}
.f-fw0 {
  font-weight: normal;
}
a.s-fc1:hover {
  text-decoration: underline;
}
.s-fc4 {
  color: #999;
}
.m-radio .toplist .tag {
  margin: 1px 0 0 10px;
}
.u-type {
  display: inline-block;
  position: relative;
  top: -1px;
  height: 16px;
  overflow: hidden;
  padding: 0 6px;
  border: 1px solid #999;
  line-height: 16px;
  color: #999;
  vertical-align: middle;
  font-size: 12px;
}
.f-fr {
  float: right;
}
.m-radio .toplist .hot {
  margin-top: 16px;
}
.u-hot,
.u-hot i {
  display: block;
  height: 8px;
}
.u-icn3,
.u-hot,
.u-hot i {
  background: url("../../../assets/imgs/table.png") no-repeat 0 9999px;
}
.u-hot {
  position: relative;
  width: 100px;
  background-position: 0 -240px;
  line-height: normal;
}
.u-hot i {
  overflow: hidden;
  padding: 0 4px;
  background-position: right -318px;
}
.u-hot i i {
  margin-left: -4px;
  padding: 0 0 0 4px;
  background-position: 0 -304px;
}
.m-radio .rdimore {
    margin-top: 35px;
}
.u-title {
    height: 40px;
    border-bottom: 2px solid #c20c0c;
}
.u-title h3 {
    float: left;
    font-size: 24px;
    font-weight: normal;
}
.f-ff2 {
    font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.f-ff1 {
    font-family: simsun,\5b8b\4f53;
}
.u-title .more {
    float: right;
    margin-top: 14px;
}
.s-fc3, a.s-fc3:hover {
    color: #666;
}
.m-radio .rdilist {
    margin-left: -30px;
}
.m-radio .rdilist li {
    float: left;
    width: 435px;
    height: 120px;
    margin-left: 30px;
    padding: 20px 0;
    border-bottom: 1px solid #e7e7e7;
}
.m-radio .rdilist .cnt {
    margin-left: 140px;
}
.m-radio .rdilist h3 {
    margin: 16px 0 20px;
}
.f-fs3 {
    font-size: 18px;
}
.m-radio .rdilist .note {
    margin-bottom: 6px;
    line-height: 20px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
.s-fc4, a.s-fc4:hover {
    color: #999;
}
.m-radio .rdilist .cvr {
    margin-right: -200px;
}
.u-cover-rdi {
    width: 120px;
    height: 120px;
}
.u-cover {
    position: relative;
    display: block;
}
.u-cover img {
    display: block;
    width: 100%;
    height: 100%;
}
.s-fc1 {
    color: #333;
}
</style>